const path = require("path");
const { src, dest, series, parallel } = require("gulp");

// 这个插件允许监听文件的新增和删除
const watch = require("gulp-watch");

const clean = require("gulp-clean");
const babel = require("gulp-babel");
const uglify = require("gulp-uglify");
const htmlmin = require("gulp-htmlmin");
const imagemin = require("gulp-imagemin");
const cssmin = require("gulp-cssmin");
const less = require("gulp-less");
const autoprefixer = require("gulp-autoprefixer");

const browserSync = require("browser-sync").create();
const isDevelopment = process.env.NODE_ENV === "development";

// 这个是针对 ie8 的配置
// https://github.com/mishoo/UglifyJS2#minify-options
const uglifyOptions = {
  compress: {
    properties: true,
  },
  output: {
    beautify: isDevelopment,
    quote_keys: true,
    keep_quoted_props: true,
  },
  ie8: true,
  warnings: isDevelopment,
};

// 基础依赖库
function libTask() {
  return src("./src/libs/**/*.js", { allowEmpty: true })
    .pipe(uglify(uglifyOptions))
    .pipe(dest("./dist/libs/"));
}

// 编译 less
function lessTask() {
  return src("./src/less/*.less").pipe(less()).pipe(dest("./src/css/"));
}

// 压缩和兼容 css
function cssTask() {
  if (isDevelopment) {
    return src("./src/css/**/*.css").pipe(dest("./dist/css/"));
  } else {
    return src("./src/css/**/*.css")
      .pipe(autoprefixer())
      .pipe(cssmin())
      .pipe(dest("./dist/css/"));
  }
}

// 图片资源
function imageTask() {
  return src("./src/images/**/*.{jpg,png,gif,ico}")
    .pipe(imagemin())
    .pipe(dest("./dist/images/"));
}

// 业务js
function jsTask() {
  if (isDevelopment) {
    return src("./src/js/**/*.js").pipe(dest("./dist/js/"));
  } else {
    return src("./src/js/**/*.js")
      .pipe(babel({ presets: ["@babel/preset-env"] }))
      .pipe(uglify(uglifyOptions))
      .pipe(dest("./dist/js/"));
  }
}

// 压缩 html(一般可以不使用)
function htmlTask() {
  // https://github.com/kangax/html-minifier#options-quick-reference
  const options = {
    removeComments: !isDevelopment,
    collapseWhitespace: !isDevelopment,
    minifyJS: !isDevelopment,
    minifyCSS: !isDevelopment,
  };

  return src(["src/*.html"]).pipe(htmlmin(options)).pipe(dest("./dist/"));
}

// 打包前先清空
function cleanTask() {
  return src("dist", { allowEmpty: true, read: false }).pipe(clean());
}

// 监听热更新
function watchTask() {
  browserSync.init({
    port: 8000,
    server: { baseDir: path.resolve(__dirname, "./dist"), index: "index.html" },
  });

  // 请注意文件夹的名称
  watch("./src/less/**/*.less", series(lessTask));
  watch("./src/css/**/*.css", series(cssTask));
  watch("./src/imgs/**/*.{jpg,png,gif,ico}", series(imageTask));
  watch("./src/js/**/*.js", series(jsTask));
  watch("./src/*.html", series(htmlTask));

  watch("./src/**/*.*", { delay: 500 }, function () {
    browserSync.reload();
  });
}

function build() {
  return series(
    cleanTask,
    lessTask,
    parallel(libTask, cssTask, imageTask, jsTask),
    htmlTask
  );
}

function dev() {
  return series(build(), watchTask);
}

exports.default = build();
exports.dev = dev();
